import React, { useState, useEffect, useRef } from 'react'
import { Table, ConfigProvider } from 'antd'
import zhCN from 'antd/lib/locale/zh_CN';

export default function PuilTabel(props) {

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys);
    props.onSelectChangeVal(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  //分页
  const onPaginationChange = (e) => {
    props.onListVal(props?.formVal, e);
  };

  return (
    <div>
      <ConfigProvider locale={zhCN}>
        <Table
          rowKey='id'
          rowSelection={props?.rowSelectionBool && rowSelection}// 是否开启复选框
          columns={props.columns}
          dataSource={props.data}
          showSizeChanger
          showQuickJumper
          loading={props.loading}
          pagination={ // props?.paginationBool是否有分页
            props?.paginationBool &&{
              simple: false,
              defaultCurrent: 1,
              current: props.pageNumber,
              defaultPageSize: props.pageSize,
              showSizeChanger: false,
              total: props.total,
              onChange: (e) => onPaginationChange(e),
            }
          }
        />
      </ConfigProvider>
    </div>
  )
}
